<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<html>
<head>
<meta charset="UTF-8">

<link href="${pageContext.request.contextPath}/jquery/bootstrap_3.3.0/css/bootstrap.min.css" type="text/css" rel="stylesheet" />
<link href="${pageContext.request.contextPath}/jquery/bootstrap-datetimepicker-master/css/bootstrap-datetimepicker.min.css" type="text/css" rel="stylesheet" />

<script type="text/javascript" src="${pageContext.request.contextPath}/jquery/jquery-1.11.1-min.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath}/jquery/bootstrap_3.3.0/js/bootstrap.min.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath}/jquery/bootstrap-datetimepicker-master/js/bootstrap-datetimepicker.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath}/jquery/bootstrap-datetimepicker-master/locale/bootstrap-datetimepicker.zh-CN.js"></script>
<!--  PAGINATION plugin -->
<link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/jquery/bs_pagination-master/css/jquery.bs_pagination.min.css">
<script type="text/javascript" src="${pageContext.request.contextPath}/jquery/bs_pagination-master/js/jquery.bs_pagination.min.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath}/jquery/bs_pagination-master/localization/en.js"></script>
<script type="text/javascript">
	$(function(){
		$(".mydate").datetimepicker({
			language:"zh-CN",
			format:"yyyy-mm-dd",
			autoclose:true,
			minView:"month",
			initialDate:new Date(),
			todayBtn:true,
			clearBtn:true//需要手动在插件内汉化
		});
		$("#createModel").click(function (){
			$("#createActivityForm").get(0).reset();
			$("#createActivityModal").modal("show");
		});
		$("#saveCreateModel").click(function (){
			var owner = $("#create-marketActivityOwner").val();
			var name = $.trim($("#create-marketActivityName").val())
			var start_date = $("#create-startTime").val();
			var end_date = $("#create-endTime").val();
			var cost = $.trim($("#create-cost").val());
			var description = $.trim($("#create-describe").val());

			if(owner==""){
				alert("所有者不能为空!")
				return;
			}
			if(name==""){
				alert("名称不能为空!")
				return;
			}
			if(start_date!=""&&end_date!=""){
				if(end_date<=start_date){
					alert("结束日期不能比开始日期小！")
					return;
				}
			}
			var rex = /^(0|[1-9][0-9]*)$/;
			if(!rex.test(cost)){
				alert("成本只能为非负整数!")
				return;
			}
			$.ajax({
				url:"${pageContext.request.contextPath}/activity/addActivity",
				data:{
					owner:owner,
					name:name,
					startDate:start_date,
					endDate:end_date,
					cost:cost,
					description:description
				},
				type:"post",
				dataType:"json",
				success:function (data){
					if(data.errorCode=="1"){
						$("#createActivityModal").modal("hide");
						//跳转接口
						getPages(1,$("#demo_pag1").bs_pagination("getOption","rowsPerPage"));
					}else{
						alert(data.errorMessage);
					}
				}
			})
		});
		getPages(1,5);
		$("#query").click(function (){
			getPages(1,$("#demo_pag1").bs_pagination("getOption","rowsPerPage"));
		});
		$("#checkAll").click(function (){
			$("#pages input[type='checkbox']").prop("checked",this.checked);
		});
		$("#pages").on("click","input[type='checkbox']",function (){
			if($("#pages input[type='checkbox']").size()==$("#pages input[type='checkbox']:checked").size()){
				$("#checkAll").prop("checked",true);
			}else{
				$("#checkAll").prop("checked",false);
			}
		});
		$("#deleteActivityByIds").click(function (){
			var checkValue = $("#pages input[type='checkbox']:checked");
			if(checkValue.size()==0){
				alert("请选择要删除的选项！")
				return;
			}
			var ids="";
			if (window.confirm("是否确认删除！")){
				$.each(checkValue,function (){
					ids+="id="+this.value+"&";
				})
				ids = ids.substr(0,ids.length-1);
				$.ajax({
					url:"${pageContext.request.contextPath}/activity/deleteActivityByIds",
					data:ids,
					type:"post",
					dataType:"json",
					success:function (data){
						if(data.errorCode=="1"){
							getPages(1,$("#demo_pag1").bs_pagination("getOption","rowsPerPage"));
							alert("删除成功！")
						}else{
							alert(data.errorMessage);
						}
					}
				});
			}
		});

		$("#editActivity").click(function (){
			var checkedId = $("#pages input[type='checkbox']:checked");
			if (checkedId.size()==0){
				alert("请选择你要修改的选项！");
				return;
			}
			if (checkedId.size()>1){
				alert("每次只能修改一个！");
				return;
			}
			var id = checkedId.val();
			$.ajax({
				url:"${pageContext.request.contextPath}/activity/findOneActivityById",
				data:{
					id:id
				},
				type:"post",
				dataType:"json",
				success:function (data){
					$("#idHidden").val(data.id);
					$("#edit-marketActivityOwner").val(data.owner);
					$("#edit-marketActivityName").val(data.name);
					$("#edit-startTime").val(data.startDate);
					$("#edit-endTime").val(data.endDate);
					$("#edit-cost").val(data.cost);
					$("#edit-describe").val(data.description);
					$("#editActivityModal").modal("show");
				}
			});
		});

		$("#updateBtn").click(function (){
			var id = $("#idHidden").val();
			var owner = $("#edit-marketActivityOwner").val();
			var name = $.trim($("#edit-marketActivityName").val());
			var startDate = $("#edit-startTime").val();
			var endDate = $("#edit-endTime").val();
			var cost = $.trim($("#edit-cost").val());
			var description = $.trim($("#edit-describe").val());
			if(owner==""){
				alert("所有者不能为空!")
				return;
			}
			if(name==""){
				alert("名称不能为空!")
				return;
			}
			if(startDate!=""&&endDate!=""){
				if(endDate<=startDate){
					alert("结束日期不能比开始日期小！")
					return;
				}
			}
			var rex = /^(0|[1-9][0-9]*)$/;
			if(!rex.test(cost)){
				alert("成本只能为非负整数!")
				return;
			}
			$.ajax({
				url:"${pageContext.request.contextPath}/activity/updateActivity",
				data:{
					id:id,
					owner:owner,
					name:name,
					startDate:startDate,
					endDate:endDate,
					cost:cost,
					description:description
				},
				type:"post",
				dataType:"json",
				success:function (data){
					if (data.errorCode=="1"){
						alert(data.errorMessage);
						getPages($("#demo_pag1").bs_pagination("getOption","currentPage"),$("#demo_pag1").bs_pagination("getOption","rowsPerPage"))
						$("#editActivityModal").modal("hide");
					}else{
						alert(data.errorMessage);
					}
				}
			});

		});
		$("#exportActivityAllBtn").click(function (){
			window.location.href="${pageContext.request.contextPath}/activity/selectActivityIntoExcel";
		});
		$("#exportActivityXzBtn").click(function (){
			var checkedids = $("#pages input[type='checkbox']:checked");
			if(checkedids.size()==0){
				alert("请选择你要导出的数据！")
				return;
			}
			var ids="";
			$.each(checkedids,function (){
				ids+="id="+this.value+"&";
			})
			ids = ids.substr(0,ids.length-1);
			window.location.href="${pageContext.request.contextPath}/activity/selectSomeActivityIntoExcel?"+ids;
		});
		$("#importActivityBtn").click(function (){
			var fileName = $("#activityFile").val();
			fileName = fileName.substr(fileName.lastIndexOf(".")+1).toLocaleLowerCase();
			if("xls"!=fileName){
				alert("只支持后缀为.xls的文件！");
				return;
			}
			var file = $("#activityFile")[0].files[0];
			var formData = new FormData();
			formData.append("activityFile",file);
			$.ajax({
				url:"${pageContext.request.contextPath}/activity/insertActivityFromExcel",
				data:formData,
				type:"post",
				processData:false,
				contentType:false,
				dataType:"json",
				success:function (data){
					if(data.errorCode=="1"){
						alert(data.errorMessage);
						getPages(1,$("#demo_pag1").bs_pagination("getOption","rowsPerPage"));
						$("#importActivityModal").modal("hide");
					}else{
						alert(data.errorMessage);
						$("#importActivityModal").modal("show");
					}
				}
			});
		});
	});
	function getPages(currentPage,pageSize){
		var name = $("#query-name").val();
		var owner = $("#query-owner").val();
		var startDate = $("#query-startDate").val();
		var endDate = $("#query-endDate").val();
		var lis="";
		$.ajax({
			url:"${pageContext.request.contextPath}/activity/showPages",
			data:{
				name:name,
				owner:owner,
				startDate:startDate,
				endDate:endDate,
				currentPage:currentPage,
				pageSize:pageSize
			},
			type: "post",
			dataType: "json",
			success:function (data){
				$.each(data.activityList,function (index,value){
					lis+="<tr class=\"active\">";
					lis+="<td><input type=\"checkbox\" value=\""+value.id+"\" name=\"id\"/></td>";
					lis+="<td><a style=\"text-decoration: none; cursor: pointer;\" onclick=\"window.location.href='${pageContext.request.contextPath}/activity/selectRemarksAndActivities?id="+value.id+"';\">"+value.name+"</a></td>";
					lis+="<td>"+value.owner+"</td>";
					lis+="<td>"+value.startDate+"</td>";
					lis+="<td>"+value.endDate+"</td>";
					lis+="</tr>";
				});
				$("#pages").html(lis);
				$("#checkAll").prop("checked",false);
				var totalPages=1;
				var number = parseInt(data.totalCount%pageSize);
				if(number==0){
					totalPages=data.totalCount/pageSize;
				}else{
					totalPages=parseInt(data.totalCount/pageSize)+1;
				}
				$("#demo_pag1").bs_pagination({
					rowsPerPage: pageSize,
					currentPage:currentPage,
					totalPages: totalPages,
					visiblePageLinks: 5,
					onChangePage:function (event,obj){
						getPages(obj.currentPage,obj.rowsPerPage);
					}
				});
			}
		});

	}
</script>
</head>
<body>

	<!-- 创建市场活动的模态窗口 -->
	<div class="modal fade" id="createActivityModal" role="dialog">
		<div class="modal-dialog" role="document" style="width: 85%;">
			<div class="modal-content">
				<div class="modal-header">
					<button type="button" class="close" data-dismiss="modal">
						<span aria-hidden="true">×</span>
					</button>
					<h4 class="modal-title" id="myModalLabel1">创建市场活动</h4>
				</div>
				<div class="modal-body">
				
					<form id="createActivityForm" class="form-horizontal" role="form">
					
						<div class="form-group">
							<label for="create-marketActivityOwner" class="col-sm-2 control-label">所有者<span style="font-size: 15px; color: red;">*</span></label>
							<div class="col-sm-10" style="width: 300px;">
								<select class="form-control" id="create-marketActivityOwner">
									<c:forEach items="${requestScope.userList}" var="user">
										<option value="${user.id}">${user.name}</option>
									</c:forEach>
								</select>
							</div>
                            <label for="create-marketActivityName" class="col-sm-2 control-label">名称<span style="font-size: 15px; color: red;">*</span></label>
                            <div class="col-sm-10" style="width: 300px;">
                                <input type="text" class="form-control" id="create-marketActivityName">
                            </div>
						</div>
						
						<div class="form-group">
							<label for="create-startTime" class="col-sm-2 control-label" >开始日期</label>
							<div class="col-sm-10" style="width: 300px;">
								<input type="text" class="form-control mydate" id="create-startTime" readonly="true">
							</div>
							<label for="create-endTime" class="col-sm-2 control-label" >结束日期</label>
							<div class="col-sm-10" style="width: 300px;">
								<input type="text" class="form-control mydate" id="create-endTime" readonly="true">
							</div>
						</div>
                        <div class="form-group">

                            <label for="create-cost" class="col-sm-2 control-label">成本</label>
                            <div class="col-sm-10" style="width: 300px;">
                                <input type="text" class="form-control" id="create-cost">
                            </div>
                        </div>
						<div class="form-group">
							<label for="create-describe" class="col-sm-2 control-label">描述</label>
							<div class="col-sm-10" style="width: 81%;">
								<textarea class="form-control" rows="3" id="create-describe"></textarea>
							</div>
						</div>
						
					</form>
					
				</div>
				<div class="modal-footer">
					<button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
					<button type="button" class="btn btn-primary" id="saveCreateModel">保存</button>
				</div>
			</div>
		</div>
	</div>
	
	<!-- 修改市场活动的模态窗口 -->
	<div class="modal fade" id="editActivityModal" role="dialog">
		<div class="modal-dialog" role="document" style="width: 85%;">
			<div class="modal-content">
				<div class="modal-header">
					<button type="button" class="close" data-dismiss="modal">
						<span aria-hidden="true">×</span>
					</button>
					<h4 class="modal-title" id="myModalLabel2">修改市场活动</h4>
				</div>
				<div class="modal-body">
				
					<form class="form-horizontal" role="form">
					
						<div class="form-group">
							<input type="hidden" id="idHidden">
							<label for="edit-marketActivityOwner" class="col-sm-2 control-label">所有者<span style="font-size: 15px; color: red;">*</span></label>
							<div class="col-sm-10" style="width: 300px;">
								<select class="form-control" id="edit-marketActivityOwner">
									<c:forEach items="${requestScope.userList}" var="user">
										<option value="${user.id}">${user.name}</option>
									</c:forEach>
								</select>
							</div>
                            <label for="edit-marketActivityName" class="col-sm-2 control-label">名称<span style="font-size: 15px; color: red;">*</span></label>
                            <div class="col-sm-10" style="width: 300px;">
                                <input type="text" class="form-control" id="edit-marketActivityName" value="发传单">
                            </div>
						</div>

						<div class="form-group">
							<label for="edit-startTime" class="col-sm-2 control-label">开始日期</label>
							<div class="col-sm-10" style="width: 300px;">
								<input type="text" class="form-control mydate" id="edit-startTime" value="2020-10-10" readonly="true">
							</div>
							<label for="edit-endTime" class="col-sm-2 control-label">结束日期</label>
							<div class="col-sm-10" style="width: 300px;">
								<input type="text" class="form-control mydate" id="edit-endTime" value="2020-10-20" readonly="true">
							</div>
						</div>
						
						<div class="form-group">
							<label for="edit-cost" class="col-sm-2 control-label">成本</label>
							<div class="col-sm-10" style="width: 300px;">
								<input type="text" class="form-control" id="edit-cost" value="5,000">
							</div>
						</div>
						
						<div class="form-group">
							<label for="edit-describe" class="col-sm-2 control-label">描述</label>
							<div class="col-sm-10" style="width: 81%;">
								<textarea class="form-control" rows="3" id="edit-describe">市场活动Marketing，是指品牌主办或参与的展览会议与公关市场活动，包括自行主办的各类研讨会、客户交流会、演示会、新产品发布会、体验会、答谢会、年会和出席参加并布展或演讲的展览会、研讨会、行业交流会、颁奖典礼等</textarea>
							</div>
						</div>
						
					</form>
					
				</div>
				<div class="modal-footer">
					<button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
					<button type="button" class="btn btn-primary" id="updateBtn">更新</button>
				</div>
			</div>
		</div>
	</div>
	
	<!-- 导入市场活动的模态窗口 -->
    <div class="modal fade" id="importActivityModal" role="dialog">
        <div class="modal-dialog" role="document" style="width: 85%;">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal">
                        <span aria-hidden="true">×</span>
                    </button>
                    <h4 class="modal-title" id="myModalLabel">导入市场活动</h4>
                </div>
                <div class="modal-body" style="height: 350px;">
                    <div style="position: relative;top: 20px; left: 50px;">
                        请选择要上传的文件：<small style="color: gray;">[仅支持.xls]</small>
                    </div>
                    <div style="position: relative;top: 40px; left: 50px;">
                        <input type="file" id="activityFile">
                    </div>
                    <div style="position: relative; width: 400px; height: 320px; left: 45% ; top: -40px;" >
                        <h3>重要提示</h3>
                        <ul>
                            <li>操作仅针对Excel，仅支持后缀名为XLS的文件。</li>
                            <li>给定文件的第一行将视为字段名。</li>
                            <li>请确认您的文件大小不超过5MB。</li>
                            <li>日期值以文本形式保存，必须符合yyyy-MM-dd格式。</li>
                            <li>日期时间以文本形式保存，必须符合yyyy-MM-dd HH:mm:ss的格式。</li>
                            <li>默认情况下，字符编码是UTF-8 (统一码)，请确保您导入的文件使用的是正确的字符编码方式。</li>
                            <li>建议您在导入真实数据之前用测试文件测试文件导入功能。</li>
                        </ul>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                    <button id="importActivityBtn" type="button" class="btn btn-primary">导入</button>
                </div>
            </div>
        </div>
    </div>
	
	
	<div>
		<div style="position: relative; left: 10px; top: -10px;">
			<div class="page-header">
				<h3>市场活动列表</h3>
			</div>
		</div>
	</div>
	<div style="position: relative; top: -20px; left: 0px; width: 100%; height: 100%;">
		<div style="width: 100%; position: absolute;top: 5px; left: 10px;">
		
			<div class="btn-toolbar" role="toolbar" style="height: 80px;">
				<form class="form-inline" role="form" style="position: relative;top: 8%; left: 5px;">
				  
				  <div class="form-group">
				    <div class="input-group">
				      <div class="input-group-addon">名称</div>
				      <input class="form-control" type="text" id="query-name">
				    </div>
				  </div>
				  
				  <div class="form-group">
				    <div class="input-group">
				      <div class="input-group-addon">所有者</div>
				      <input class="form-control" type="text" id="query-owner">
				    </div>
				  </div>


				  <div class="form-group">
				    <div class="input-group">
				      <div class="input-group-addon">开始日期</div>
					  <input class="form-control mydate" type="text" id="query-startDate" readonly="true"/>
				    </div>
				  </div>
				  <div class="form-group">
				    <div class="input-group">
				      <div class="input-group-addon">结束日期</div>
					  <input class="form-control mydate" type="text" id="query-endDate" readonly="true">
				    </div>
				  </div>
				  
				  <button type="button" class="btn btn-default" id="query">查询</button>
				  
				</form>
			</div>
			<div class="btn-toolbar" role="toolbar" style="background-color: #F7F7F7; height: 50px; position: relative;top: 5px;">
				<div class="btn-group" style="position: relative; top: 18%;">
				  <button type="button" class="btn btn-primary" id="createModel"><span class="glyphicon glyphicon-plus"></span> 创建</button>
				  <button type="button" class="btn btn-default" id="editActivity"><span class="glyphicon glyphicon-pencil"></span> 修改</button>
				  <button type="button" class="btn btn-danger" id="deleteActivityByIds"><span class="glyphicon glyphicon-minus"></span> 删除</button>
				</div>
				<div class="btn-group" style="position: relative; top: 18%;">
                    <button type="button" class="btn btn-default" data-toggle="modal" data-target="#importActivityModal" id="importBtn"><span class="glyphicon glyphicon-import"></span> 上传列表数据（导入）</button>
                    <button id="exportActivityAllBtn" type="button" class="btn btn-default"><span class="glyphicon glyphicon-export"></span> 下载列表数据（批量导出）</button>
                    <button id="exportActivityXzBtn" type="button" class="btn btn-default"><span class="glyphicon glyphicon-export"></span> 下载列表数据（选择导出）</button>
                </div>
			</div>
			<div style="position: relative;top: 10px;">
				<table class="table table-hover">
					<thead>
						<tr style="color: #B3B3B3;">
							<td><input type="checkbox" id="checkAll"/></td>
							<td>名称</td>
                            <td>所有者</td>
							<td>开始日期</td>
							<td>结束日期</td>
						</tr>
					</thead>
					<tbody id="pages">
<%--						<tr class="active">--%>
<%--							<td><input type="checkbox" /></td>--%>
<%--							<td><a style="text-decoration: none; cursor: pointer;" onclick="window.location.href='detail.jsp';">发传单</a></td>--%>
<%--                            <td>zhangsan</td>--%>
<%--							<td>2020-10-10</td>--%>
<%--							<td>2020-10-20</td>--%>
<%--						</tr>--%>
<%--                        <tr class="active">--%>
<%--                            <td><input type="checkbox" /></td>--%>
<%--                            <td><a style="text-decoration: none; cursor: pointer;" onclick="window.location.href='detail.jsp';">发传单</a></td>--%>
<%--                            <td>zhangsan</td>--%>
<%--                            <td>2020-10-10</td>--%>
<%--                            <td>2020-10-20</td>--%>
<%--                        </tr>--%>
					</tbody>
				</table>
				<div id="demo_pag1"></div>
			</div>
			
<%--			<div style="height: 50px; position: relative;top: 30px;">--%>
<%--				<div>--%>
<%--					<button type="button" class="btn btn-default" style="cursor: default;">共<b>50</b>条记录</button>--%>
<%--				</div>--%>
<%--				<div class="btn-group" style="position: relative;top: -34px; left: 110px;">--%>
<%--					<button type="button" class="btn btn-default" style="cursor: default;">显示</button>--%>
<%--					<div class="btn-group">--%>
<%--						<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">--%>
<%--							10--%>
<%--							<span class="caret"></span>--%>
<%--						</button>--%>
<%--						<ul class="dropdown-menu" role="menu">--%>
<%--							<li><a href="#">20</a></li>--%>
<%--							<li><a href="#">30</a></li>--%>
<%--						</ul>--%>
<%--					</div>--%>
<%--					<button type="button" class="btn btn-default" style="cursor: default;">条/页</button>--%>
<%--				</div>--%>
<%--				<div style="position: relative;top: -88px; left: 285px;">--%>
<%--					<nav>--%>
<%--						<ul class="pagination">--%>
<%--							<li class="disabled"><a href="#">首页</a></li>--%>
<%--							<li class="disabled"><a href="#">上一页</a></li>--%>
<%--							<li class="active"><a href="#">1</a></li>--%>
<%--							<li><a href="#">2</a></li>--%>
<%--							<li><a href="#">3</a></li>--%>
<%--							<li><a href="#">4</a></li>--%>
<%--							<li><a href="#">5</a></li>--%>
<%--							<li><a href="#">下一页</a></li>--%>
<%--							<li class="disabled"><a href="#">末页</a></li>--%>
<%--						</ul>--%>
<%--					</nav>--%>
<%--				</div>--%>
<%--			</div>--%>

		</div>
		
	</div>
</body>
</html>